<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>pdf列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片 -->
        <el-card class="box-card">
            <el-row :gutter="20">
                <el-col :span="4">
                    <el-button type="primary" @click="addDialogVisible = true">添加pdf文件</el-button>
                </el-col>
            </el-row>
             <!-- 表格 -->
             <el-table :data="pdfList"  stripe >
                <el-table-column type="index"></el-table-column>
                <el-table-column label="pdf文件" prop="description" :filters="descriptionFilters" :filter-method="filterHandler"></el-table-column>
                <!-- <el-table-column label="下级关联状态" prop="hasChild" :filters="isConnetedFilters" :filter-method="filterHandler"></el-table-column> --> -->
                <el-table-column label="下级关联状态" prop="hasChild" :filters="isConnetedFilters" :filter-method="filterHandler">
                    <!-- 作用域插槽 -->
                    <template slot-scope="scope">
                        <!-- @change="stateChanged(scope.row)" -->
                        <el-switch v-model="scope.row.hasChild" disabled></el-switch>
                    </template> 
                </el-table-column>

                <el-table-column label="操作">
                     <!-- 作用域插槽  在其中放置一些button-->
                    <template slot-scope="scope">
                        <!-- <el-button type="primary" size="mini" plain @click="showDetail(scope.row.id)">详情</el-button> -->
                        <el-button type="warning" size="mini" plain @click="showEditDialog(scope.row.id)">修改</el-button>
                        <el-button type="danger" size="mini" plain @click="deleteMapById(scope.row.id)">删除</el-button>
                    </template> 
                </el-table-column>

            </el-table>
        </el-card>
        <!-- 新增对话框 -->
        <el-dialog
            title="新增pdf文件"
            :visible.sync="addDialogVisible"
            width="50%"
            @close="addDialogClosed">
            <!-- 对话框内容主体 -->
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
                <el-form-item label="文件描述" prop="description"> <!--prop 是在addFormRule中用的-->
                    <el-input v-model="addForm.description"></el-input>
                </el-form-item>
                <el-form-item label="文件上传">
                    <el-upload
                        ref = "addUpload"
                        class="upload-demo"
                        action="/path/fileNode/insert"  
                        :data = "fileNode"
                        accept = ".pdf"
                        :auto-upload = "false" 
                        :on-preview="add_handlePreview"
                        :on-remove="add_handleRemove"
                        :before-remove="add_beforeRemove"
                        :on-change="add_handleUploadChange"
                        :on-progress="add_handleProgress"
                        :on-success="add_handleSuccess"
                        :on-exceed="add_handleExceed"
                        :limit="1"
                        :file-list="add_uploadFileList">
                        <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
                        <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
                        <div style="margin-top: 25px;" slot="tip" class="el-upload__tip">只能上传.pdf文件 只能上传1张图片</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <!-- 对话框底部 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addImageInfo">确 定</el-button>
            </span>
        </el-dialog> 
        <!-- 修改对话框 -->
        <el-dialog
            title="修改pdf文件"
            :visible.sync="editDialogVisible"
            width="50%"
            @close="editDialogClosed">
            <!-- 对话框内容主体 -->
            <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
                <el-form-item label="文件描述" prop="description"> <!--prop 是在editFormRule中用的-->
                    <el-input v-model="editForm.description"></el-input>
                </el-form-item>
                <el-form-item label="文件上传">
                    <el-upload
                        ref = "editUpload"
                        class="upload-demo"
                        action="/path/fileNode/update"  
                        :data = "fileNode"
                        accept = ".pdf"
                        :auto-upload = "false" 
                        :on-preview="edit_handlePreview"
                        :on-remove="edit_handleRemove"
                        :before-remove="edit_beforeRemove"
                        :on-change="edit_handleUploadChange"
                        :on-progress="edit_handleProgress"
                        :on-success="edit_handleSuccess"
                        :on-exceed="edit_handleExceed"
                        :limit="1"
                        :file-list="edit_uploadFileList">
                        <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
                        <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
                        <div style="margin-top: 25px;" slot="tip" class="el-upload__tip">只能上传.pdf文件 只能上传1张图片</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <!-- 对话框底部 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editImageInfo">确 定</el-button>
            </span>
        </el-dialog> 
    </div>
</template>

<script>
    export default {
        data() {
            return {
                // 查询list参数
                queryInfo: {
                    pageNum:1,
                    scene:"pdf",
                    pageSize:20,
                    query:''
                },

                editDialogVisible: false,
                addDialogVisible: false,
                // 事件列表总列表
                pdfList: [
                    // {id: "172", description:"特里尔中学", hasChild:0},
                    // {id: "173", description:"现在的特里尔中学", hasChild:1}
                ],
                // 编辑对话框绑定数据
                editForm: {
                    description:""
                },
                addForm: {
                    description:""
                },
                fileNode:{
                    description:"",
                    scene:"pdf"
                },
                // 添加表单的验证规则对象
                editFormRules:{
                    description:[
                        { required: true, message: '请输入文件描述', trigger: 'blur' },
                        { min: 2, max: 100, message: '长度在2~100个字符', trigger: 'blur' }
                    ]
                },
                addFormRules:{
                    description:[
                        { required: true, message: '请输入文件描述', trigger: 'blur' },
                        { min: 2, max: 100, message: '长度在2~100个字符', trigger: 'blur' }
                    ]
                },
                // 事件列表过滤内容
                descriptionFilters:[],
                isConnetedFilters:[],
                // 上传文件列表
                edit_uploadFileList:[],
                add_uploadFileList:[]
            }
        },
        created() {
            this.getpdfList();
        },
        methods: {
            // 展示编辑事件的对话框（修改）
            async showEditDialog(id) {
                this.editDialogVisible = true;
                const{data:res} = await this.$http.get("fileNode/selectOneById", {params:{"id":id}});
                const fileNode = res.data;
                const fileName = fileNode.originFileName;
                if (fileName != null) {
                    var fileObj = new Object();
                    fileObj.name = fileName;
                    fileObj.url = fileNode.filePath;
                    this.edit_uploadFileList = [fileObj];
                }
                this.editForm = fileNode;
            },
            // 修改对话框点击了确定事件
            editImageInfo() {
                this.$refs.editFormRef.validate(async valid =>{
                    if (!valid) return
                    this.fileNode.description = this.editForm.description;
                    this.fileNode.id = this.editForm.id;
                    // 文件上传接口
                    this.$refs.editUpload.submit();
                    // 更新基本属性接口
                    const {data:res} = await this.$http.post("fileNode/updateProperty", this.editForm);
                    if (res.code != 200) {
                        this.$message.error("更新失败");
                    }
                    this.$message.success("更新成功");
                    this.editDialogVisible = false;
                    this.getpdfList();
                })
            },

            // 新增对话框点击了确定事件
            addImageInfo() {
                this.$refs.addFormRef.validate(async valid =>{
                    if (!valid) return
                    // 发起请求
                    this.fileNode.description = this.addForm.description;
                    this.$refs.addUpload.submit();
                    this.addDialogVisible = false;
                    this.getpdfList();
                } )
                
                
            },
            // 刷新事件列表
            async getpdfList() {
                const {data:res} = await this.$http.get("fileNode/selectAll", {params: this.queryInfo})
                if (res.code != 200) return this.$message.error("获取pdf列表失败!");
                this.pdfList = res.data
                for (let i = 0; i < this.pdfList.length; i++) {
                    const cur_map = this.pdfList[i];

                    var descriptionObj = new Object();
                    descriptionObj.text = cur_map.description;
                    descriptionObj.value = cur_map.description;
                    this.descriptionFilters.push(descriptionObj);

                    var hasChildObj = new Object();
                    hasChildObj.text = cur_map.hasChild;
                    hasChildObj.value = cur_map.hasChild;
                    this.isConnetedFilters.push(hasChildObj);

                }
                // this.pdfList = res.data.pdfList;
                // this.total = res.data.total;
            },
            // 表格过滤函数
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },

            /**编辑对话框的上传文件操作 */
            // 删除文件
            async edit_handleRemove(file, uploadFileList) {
                const fileId = this.editForm.id;
                const {data:res} = await this.$http.post("fileNode/deleteFile", {id:fileId});
                if (res.code != 200) {
                    this.$message.error("删除失败");
                }
                this.$message.success("删除成功");
            },
           
            // 删除之前
            edit_beforeRemove(file, uploadFileList) {
                // console.log(file, uploadFileList);
            },
            // 预览文件
            edit_handlePreview(file) {
                console.log("预览文件", file)
            },
            //文件上传时
            edit_handleProgress(uploadFileList) {
                // console.log(uploadFileList)
            },
            // 上传成功后
            edit_handleSuccess(response, file, fileList) {
                this.$message.success("上传pdf文件成功");
                this.$refs.editUpload.clearFiles();
                this.getpdfList();
            },
            //文件超出个数限制
            edit_handleExceed() {
                this.$message.error("只允许传1个pdf文件");
            },
            // 上传文件发生改变
            edit_handleUploadChange(file, uploadFileList) {
                this.edit_uploadFileList = uploadFileList;
            },
            // 编辑对话框关闭后事件
            editDialogClosed() {
                this.$refs.editFormRef.resetFields();
            },

            /**新增对话框上传钩子函数 */
            // 上传成功后
            add_handleSuccess(response, file, fileList) {
                this.$message.success("上传pdf文件成功");
                this.$refs.addUpload.clearFiles();
                this.getpdfList()
            },
            // 新增对话框关闭后事件
            addDialogClosed() {
                this.$refs.addFormRef.resetFields();
            },
            // 删除文件
            async add_handleRemove(file, uploadFileList) {
                console.log("删除文件")
            },
            // 删除之前
            add_beforeRemove(file, uploadFileList) {
                console.log(file, uploadFileList);
            },
            // 预览文件
            add_handlePreview(file) {
                console.log("预览文件", file)
            },
            //文件上传过程中
            add_handleProgress(uploadFileList) {
                // console.log(uploadFileList)
            },
            //文件超出个数限制
            add_handleExceed() {
                this.$message.error("只允许传1个pdf文件");
            },
            // 上传文件改变
            add_handleUploadChange(file, uploadFileList) {
                this.add_uploadFileList = uploadFileList;
            },
            // 删除地图文件
            async deleteMapById(id) {
                // 弹框提示
                const conformRes = await this.$confirm('此操作将删除该条, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'  // 图标
                }).catch(err => {
                    return err
                }) 
                // 如果用户确认则返回confirm串 取消返回的是cancel
                // console.log(conformRes)
                if (conformRes !== "confirm") {
                    return this.$message.info("已经取消删除");
                }
                const{data:res} = await this.$http.post("fileNode/deleteById", {id:id});
                if (res.code !== 200) {
                    return this.$message.error("删除失败");
                }
                this.$message.success("删除成功");
                this.getpdfList();
            }
        }
    }
</script>

<style lang="less" scoped>
    .box-card {
        line-height: 0%;
        text-align: left;
    }
</style>